<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Tiles - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Tiles</a></li>
                    <li class="toc-entry"><a href="#_tiles_about">About</a></li>
                    <li class="toc-entry"><a href="#_tiles_sizes">Sizes</a></li>
                    <li class="toc-entry"><a href="#_tiles_icon">Icon &amp; Branding bar</a></li>
                    <li class="toc-entry"><a href="#_tiles_badges">Badges</a></li>
                    <li class="toc-entry"><a href="#_tiles_color">Colors</a></li>
                    <li class="toc-entry"><a href="#_tiles_selected">Selected tile</a></li>
                    <li class="toc-entry"><a href="#_tiles_cover">Cover</a></li>
                    <li class="toc-entry"><a href="#_tiles_effects">Tiles effects</a></li>
                    <li class="toc-entry"><a href="#_tiles_grid">Grid for tiles</a></li>
                    <li class="toc-entry"><a href="#_tiles_position">Tiles position</a></li>
                    <li class="toc-entry"><a href="#_tiles_groups">Tiles groups</a></li>
                </ul>
            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Tiles</h1>
                <p class="text-leader">
                    Metro 4 present classes for creating tiles such as tiles in Windows 8/10.
                </p>

                <!-- ads-html -->

                <h3 id="_tiles_about">About</h3>
                <p>
                    Metro 4 contains classes to create tiles such as application tiles in Windows 8/10. To create tile you can add role <code>tile</code> to element with attribute <code>data-role</code>.
                </p>

                <p class="remark alert d-none d-block-ie">
                    <strong>Important!</strong> Tiles work with <code>grid layout</code> css feature. But IE11 supports it in old format. Old format for grid layout not supported in Metro 4. For IE11 in Metro 4 present fallback into floated blocks.
                </p>

                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-size="small"></div>
                        <div data-role="tile" data-size="small"></div>
                        <div data-role="tile" data-size="small" style="grid-column-start: 1; grid-row: 2"></div>
                        <div data-role="tile" data-size="small" style="grid-column-start: 2; grid-row: 2"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="wide"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile"&gt;&lt;/div&gt;
                </code></pre>

                <h3 id="_tiles_sizes">Tile sizes</h3>
                <p>
                    You can use <code>four</code> sizes for your tiles: <code>small</code>, <code>medium</code>, <code>wide</code> and <code>large</code>.
                    To set tile size use attribute <code>data-size</code>.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-size="small"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="wide"></div>
                        <div data-role="tile" data-size="large"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile" data-size="small"&gt;&lt;/div&gt;
                    &lt;div data-role="tile" data-size="medium"&gt;&lt;/div&gt;
                    &lt;div data-role="tile" data-size="wide"&gt;&lt;/div&gt;
                    &lt;div data-role="tile" data-size="large"&gt;&lt;/div&gt;
                </code></pre>

                <h3 id="_tiles_icon">Tile icon &amp; branding bar</h3>
                <p>
                    The tile can have icon for the identification of target process.
                    To create <code>icon</code> you can add element with class <code>.icon</code> inside a tile with <code>image</code>.
                    Also you can use icon from font as tile icon.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-size="small" data-role="tile"><img src="images/github.png" class="icon"></div>
                        <div data-size="medium" data-role="tile"><img src="images/github.png" class="icon"></div>
                        <div data-size="wide" data-role="tile"><img src="images/github.png" class="icon"></div>
                        <div data-size="large" data-role="tile"><span class="mif-github icon"></span></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-size="small" data-role="tile"&gt;&lt;img src="images/github.png" class="icon"&gt;&lt;/div&gt;
                    &lt;div data-size="medium" data-role="tile"&gt;&lt;img src="images/github.png" class="icon"&gt;&lt;/div&gt;
                    &lt;div data-size="wide" data-role="tile"&gt;&lt;img src="images/github.png" class="icon"&gt;&lt;/div&gt;
                    &lt;div data-size="large" data-role="tile"&gt;&lt;span class="mif-github icon"&gt;&lt;/span&gt;&lt;/div&gt;
                </code></pre>
                <p>
                    To create <code>branding bar</code>, you must add element with class <code>.branding-bar</code> inside a tile.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile">
                            <span class="branding-bar">Branding bar</span>
                        </div>
                        <div data-role="tile" data-size="wide">
                            <span class="branding-bar">Branding bar</span>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile"&gt;
                        &lt;span class="branding-bar"&gt;Branding bar&lt;/span&gt;
                    &lt;/div&gt;
                </code></pre>
                <p>
                    You can combine <code>icon</code> and <code>branding bar</code> in one tile.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile">
                            <span class="mif-facebook icon"></span>
                            <span class="branding-bar">Facebook</span>
                        </div>
                        <div data-role="tile" data-size="wide">
                            <span class="mif-cart icon"></span>
                            <span class="branding-bar">Store</span>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile"&gt;
                        &lt;span class="branding-bar"&gt;Branding bar&lt;/span&gt;
                    &lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_tiles_badges">Badges</h3>
                <p>
                    The tile can have two types od <code>badges</code>. Top badge and bottom badge.
                    To create <code>badge</code>, you must add element with class <code>.badge-top</code> or <code>.badge-bottom</code> inside a tile.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" class="bg-red">
                            <span class="badge-top">10</span>
                        </div>
                        <div data-role="tile" class="bg-green">
                            <span class="badge-bottom">10</span>
                        </div>
                        <div data-role="tile">
                            <span class="mif-facebook icon"></span>
                            <span class="branding-bar">Facebook</span>
                            <span class="badge-bottom">10</span>
                        </div>
                        <div data-role="tile" class="bg-pink">
                            <span class="mif-cart icon"></span>
                            <span class="branding-bar">Store</span>
                            <span class="badge-top">10</span>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile"&gt;
                        &lt;span class="badge-top"&gt;10&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;div data-role="tile"&gt;
                        &lt;span class="badge-bottom"&gt;10&lt;/span&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_tiles_color">Colors</h3>
                <p>
                    You can change tile color with color classes or inline css style.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-size="small" class="bg-red"></div>
                        <div data-role="tile" data-size="small" class="bg-amber"></div>
                        <div data-role="tile" data-size="small" class="bg-green" style="grid-column-start: 1; grid-row: 2"></div>
                        <div data-role="tile" data-size="small" class="bg-pink" style="grid-column-start: 2; grid-row: 2"></div>
                        <div data-role="tile" data-size="medium" class="bg-orange"></div>
                        <div data-role="tile" data-size="wide" style="background-color: #4a00b3"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile" data-size="small" class="bg-red"&gt;&lt;/div&gt;
                    &lt;div data-role="tile" data-size="wide" style="background-color: #4a00b3"&gt;&lt;/div&gt;
                </code></pre>

                <h3 id="_tiles_selected">Selected tile</h3>
                <p>
                    If you add class <code>.selected</code> to tile, you can make tile as <code>selected</code>.
                </p>
                <div class="example">
                    <div class="tiles-grid d-flex flex-justify-center flex-no-shrink flex-wrap">
                        <div data-role="tile" class="bg-green selected">
                            <span class="icon mif-apps"></span>
                            <span class="branding-bar">Applications</span>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile" class="bg-green selected"&gt;
                        &lt;span class="icon mif-apps"&gt;&lt;/span&gt;
                        &lt;span class="branding-bar"&gt;Applications&lt;/span&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_tiles_cover">Cover for tile</h3>
                <p>
                    You can create tile with cover image. To create it add attribute <code>data-cover</code> to tile.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-size="large" data-cover="images/me.jpg">
                            <span class="branding-bar">Sergey Pimenov</span>
                        </div>

                        <div data-role="tile" data-cover="images/me_civil.jpg">
                            <span class="branding-bar">Author</span>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile" data-size="large" data-cover="images/me.jpg"&gt;
                        &lt;span class="branding-bar"&gt;Sergey Pimenov&lt;/span&gt;
                    &lt;/div&gt;

                    &lt;div data-role="tile" data-cover="images/me_civil.jpg"&gt;
                        &lt;span class="branding-bar"&gt;Author&lt;/span&gt;
                    &lt;/div&gt;
                </code></pre>
                <p>
                    In additional, you can create covered slides with attribute <code>data-cover</code> for slides see below.
                </p>

                <h3 id="_tiles_effects">Tiles effects</h3>
                <p>
                    You can add any affects to tiles. This is can be <code>hover affects</code> and <code>live effects</code>.
                    To set effect, use attribute <code>data-effect</code> and create required <code>slides</code>.
                    You can use next effects:
                </p>

                <h4>Hover effect</h4>
                <p>
                    To set hover effect use next values for <code>data-effect</code> attribute:
                    <code>hover-slide-up</code>,
                    <code>hover-slide-down</code>,
                    <code>hover-slide-left</code>,
                    <code>hover-slide-right</code>,
                    <code>hover-zoom-up</code>,
                    <code>hover-zoom-down</code>,
                    <code>hover-zoom-left</code> and
                    <code>hover-zoom-right</code>.
                    Also you must create <code>two</code> slides with classes: <code>.slide-front</code> and <code>.slide-back</code>
                </p>
                <pre><code class="html">
                    &lt;div data-role="tile" data-effect="..."&gt;
                        &lt;div class="slide-front"&gt;...&lt;/div&gt;
                        &lt;div class="slide-back"&gt;...&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-size="medium" data-effect="hover-slide-up">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-red">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-slide-up</span>
                        </div>

                        <div data-role="tile" data-size="medium" data-effect="hover-slide-down">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-cyan">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-slide-down</span>
                        </div>

                        <div data-role="tile" data-size="medium" data-effect="hover-slide-left">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-green">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-slide-left</span>
                        </div>

                        <div data-role="tile" data-size="medium" data-effect="hover-slide-right">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-brown">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-slide-right</span>
                        </div>

                        <div data-role="tile" data-size="medium" data-effect="hover-zoom-up">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-pink">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-zoom-up</span>
                        </div>

                        <div data-role="tile" data-size="medium" data-effect="hover-zoom-down">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-teal">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-zoom-down</span>
                        </div>

                        <div data-role="tile" data-size="medium" data-effect="hover-zoom-left">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-steel">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-zoom-left</span>
                        </div>

                        <div data-role="tile" data-size="medium" data-effect="hover-zoom-right">
                            <div class="slide-front">
                                <img src="images/pumba-bg.jpg" class="h-100 w-100">
                            </div>
                            <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-mauve">
                                <p class="text-center">
                                    Tumultumque de brevis historia, aperto heuretes!
                                </p>
                            </div>
                            <span class="branding-bar fg-dark">hover-zoom-right</span>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile" data-size="medium" data-effect="hover-zoom-right"&gt;
                        &lt;div class="slide-front"&gt;
                            &lt;img src="images/pumba-bg.jpg" class="h-100 w-100"&gt;
                        &lt;/div&gt;
                        &lt;div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-mauve"&gt;
                            &lt;p class="text-center"&gt;
                                Bubos mori in moscua! Tumultumque de brevis historia, aperto heuretes!
                            &lt;/p&gt;
                        &lt;/div&gt;
                        &lt;span class="branding-bar fg-dark"&gt;hover-zoom-right&lt;/span&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4>Live tiles</h4>
                <p>
                    Metro 4 contains a number of effects for tiles who transform tile to live tile. Add attribute <code>data-effect</code> with values:
                        <code>animate-slide-up</code>,
                        <code>animate-slide-down</code>,
                        <code>animate-slide-left</code>,
                        <code>animate-slide-right</code> and
                        <code>animate-fade</code>.
                </p>

                <h5>Slide and fade effects</h5>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-effect="animate-slide-up">
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>1</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>2</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>3</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>4</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>5</h1></div>
                        </div>
                        <div data-role="tile" data-effect="animate-slide-down">
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>1</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>2</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>3</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>4</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>5</h1></div>
                        </div>
                        <div data-role="tile" data-effect="animate-slide-left">
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>1</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>2</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>3</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>4</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>5</h1></div>
                        </div>
                        <div data-role="tile" data-effect="animate-slide-right">
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>1</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>2</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>3</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>4</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>5</h1></div>
                        </div>
                        <div data-role="tile" data-effect="animate-fade">
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>1</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>2</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>3</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>4</h1></div>
                            <div class="slide d-flex flex-align-center flex-justify-center"><h1>5</h1></div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile" data-effect="animate-slide-up"&gt;
                        &lt;div class="slide"&gt;1&lt;/div&gt;
                        &lt;div class="slide"&gt;2&lt;/div&gt;
                        &lt;div class="slide"&gt;3&lt;/div&gt;
                        &lt;div class="slide"&gt;4&lt;/div&gt;
                        &lt;div class="slide"&gt;5&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h5>Image-set</h5>
                <p>
                    Also, you can use live tile with <code>image set</code> effect. To create this tile, add attribute <code>data-effect="image-set"</code> and add images inside tile.
                </p>
                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-size="wide" data-effect="image-set">
                            <img src="images/1.jpg">
                            <img src="images/2.jpg">
                            <img src="images/3.jpg">
                            <img src="images/4.jpg">
                            <img src="images/5.jpg">
                            <img src="images/jek_vorobey.jpg">
                            <img src="images/shvarcenegger.jpg">
                            <img src="images/me.jpg">
                            <img src="images/me_civil.jpg">
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="tile" data-size="wide" data-effect="image-set"&gt;
                        &lt;img src="images/1.jpg"&gt;
                        &lt;img src="images/2.jpg"&gt;
                        &lt;img src="images/3.jpg"&gt;
                        &lt;img src="images/4.jpg"&gt;
                        &lt;img src="images/5.jpg"&gt;
                    &lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_tiles_grid">Tiles grid</h3>
                <p>
                    To collect tiles in group Metro 4 contains special class <code>.tiles-grid</code>. This class create <code>css grid layout</code> for tiles with special cell sizes.
                </p>
                <pre><code class="html">
                    &lt;div class="tiles-grid"&gt;
                        ...
                    &lt;/div&gt;
                </code></pre>

                <p>
                    With <code>tiles grid</code> you can easy place tiles as you wish.
                    The grid is divided into cells of size <code>70x70</code> with an interval of <code>10</code> px without limitation to height or width.
                    You can limit the size of the grid with subclasses <code>.size-*</code> from <code>1</code> to <code>10</code>. One size is equivalent of small tile. Sizes include gap.
                </p>

                <div class="example">
                    <div class="tiles-grid">
                        <div data-role="tile" data-size="small"></div>
                        <div data-role="tile" data-size="small"></div>
                        <div data-role="tile" data-size="small" class="col-1 row-2"></div>
                        <div data-role="tile" data-size="small" class="col-2 row-2"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="wide"></div>
                        <div data-role="tile" data-size="large"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="wide"></div>
                    </div>
                </div>

                <h3 id="_tiles_position">Tiles position in grid</h3>
                <p>
                    You can place a tile to a specified position in grid with special classes <code>.col-*</code> and <code>.row-*</code>.
                    This classes defined from <code>1</code> to <code>12</code> and allow you to place the tile in the specified column and row.
                </p>
                <pre><code class="html">
                    &lt;div class="tiles-grid"&gt;
                        &lt;div data-role="tile" data-size="small"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="small"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="small" class="col-1 row-2"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="small" class="col-2 row-2"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="medium"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="wide"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="large"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="medium"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="medium"&gt;&lt;/div&gt;
                        &lt;div data-role="tile" data-size="wide"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_tiles_groups">Tiles groups</h3>
                <p>
                    To grouping tiles you can use special class <code>.tiles-group</code>. To set group fixed size, add one of classes:
                        <code>.size-half</code>,
                        <code>.size-1</code>,
                        <code>.size-2</code>,
                        <code>.size-3</code>,
                        <code>.size-4</code>,
                        <code>.size-5</code>,
                        <code>.size-6</code>,
                        <code>.size-7</code>,
                        <code>.size-8</code>,
                        <code>.size-9</code>,
                        <code>.size-10</code>.
                </p>
                <p>
                    Also, you can use media breakpoints for change size. To get it, use classes:
                        <code>.size-{media}-half</code>,
                        <code>.size-{media}-1</code>,
                        <code>.size-{media}-2</code>,
                        <code>.size-{media}-3</code>,
                        <code>.size-{media}-4</code>,
                        <code>.size-{media}-5</code>,
                        <code>.size-{media}-6</code>,
                        <code>.size-{media}-7</code>,
                        <code>.size-{media}-8</code>,
                        <code>.size-{media}-9</code>,
                        <code>.size-{media}-10</code>.
                    Where <code>{media}</code> is a breakpoint: <code>fs</code>, <code>sm</code>, <code>md</code>, <code>ld</code>, <code>xl</code>, <code>xxl</code>.
                </p>
                <div class="example clear">
                    <div class="tiles-grid tiles-group size-2 fg-white ml-0 mt-10 fg-dark" data-group-title="General">
                        <a href="https://github.com/olton/Metro-UI-CSS" data-role="tile" class="bg-indigo fg-white">
                            <span class="mif-github icon"></span>
                            <span class="branding-bar">Github</span>
                            <span class="badge-bottom">30</span>
                        </a>
                        <div data-role="tile" class="bg-cyan fg-white">
                            <span class="mif-envelop icon"></span>
                            <span class="branding-bar">Email</span>
                            <span class="badge-bottom">10</span>
                        </div>
                        <div data-role="tile" class="bg-orange fg-white" data-size="wide">
                            <span class="mif-chrome icon"></span>
                            <span class="branding-bar">Chrome</span>
                        </div>
                        <div data-role="tile" data-size="small">
                            <span class="mif-apple icon"></span>
                        </div>
                        <div data-role="tile" data-size="small" class="bg-red fg-white">
                            <span class="mif-bell icon"></span>
                        </div>
                        <div data-role="tile" data-size="small" class="bg-teal fg-white col-1 row-6">
                            <span class="mif-windows icon"></span>
                        </div>
                        <div data-role="tile" data-size="small" class="bg-brown fg-white col-2 row-6">
                            <span class="mif-wind icon"></span>
                        </div>
                        <div data-role="tile" class="bg-cyan fg-white">
                            <span class="mif-table icon"></span>
                            <span class="branding-bar">Tables</span>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="tiles-grid tiles-group size-2" data-group-title="General"&gt;
                        &lt;a href="https://github.com/olton/Metro-UI-CSS"
                                data-role="tile" class="bg-indigo"&gt;
                            &lt;span class="mif-github icon"&gt;&lt;/span&gt;
                            &lt;span class="branding-bar"&gt;Github&lt;/span&gt;
                            &lt;span class="badge-bottom"&gt;30&lt;/span&gt;
                        &lt;/a&gt;
                        &lt;div data-role="tile" class="bg-cyan"&gt;
                            &lt;span class="mif-envelop icon"&gt;&lt;/span&gt;
                            &lt;span class="branding-bar"&gt;Email&lt;/span&gt;
                            &lt;span class="badge-bottom"&gt;10&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div data-role="tile" class="bg-orange" data-size="wide"&gt;
                            &lt;span class="mif-chrome icon"&gt;&lt;/span&gt;
                            &lt;span class="branding-bar"&gt;Chrome&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div data-role="tile" data-size="small"&gt;
                            &lt;span class="mif-apple icon"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div data-role="tile" data-size="small" class="bg-red"&gt;
                            &lt;span class="mif-bell icon"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div data-role="tile" data-size="small" class="bg-teal col-1 row-6"&gt;
                            &lt;span class="mif-windows icon"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div data-role="tile" data-size="small" class="bg-brown col-2 row-6"&gt;
                            &lt;span class="mif-wind icon"&gt;&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div data-role="tile" class="bg-cyan"&gt;
                            &lt;span class="mif-table icon"&gt;&lt;/span&gt;
                            &lt;span class="branding-bar"&gt;Tables&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>